<template>
    <div class="container">
        <div class="box">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"
                class="demo-ruleForm">
                <!-- 输入用户名 -->
                <el-form-item label="用户名" prop="username">
                    <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 输入密码 -->
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <!-- 输入验证码 -->
                <el-form-item label="验证码" prop="captcha">
                    <el-input type="text" v-model="ruleForm.captcha" autocomplete="off">
                        <template slot="append">
                            <!-- 点击时重新获取验证码 -->
                            <div v-html="captchaPic" @click="getCode"></div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <!-- 登录按钮与重置表单按钮 -->
                    <el-button class="btn" type="primary" @click="login('ruleForm')">登录</el-button>
                    <el-button class="btn" @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        //用户名校验
        let checkUsername = (rule, value, callback) => {
            //去空格
            value = value.trim();
            //不能为空
            if (value === '') callback(new Error('用户名不能为空'));
            //正则校验
            else if (!this.$nameTest(value)) callback(new Error('用户名格式错误'));
            else callback();
        };
        //检查密码
        let checkPassword = (rule, value, callback) => {
            //去头尾空格
            value = value.trim();
            //不能为空
            if (value === '') callback(new Error('密码不能为空'));
            //校验
            else if (!this.$pwdTest(value)) callback(new Error('密码格式错误'));
            else callback();
        };
        //检查验证码
        let checkCaptcha = (rule, value, callback) => {
            //验证码是否正确
            if (value != this.captchaAns) callback(new Error('验证码错误'));
            else callback();
        };
        //初始化
        return {
            //验证码答案
            captchaAns: '',
            //验证码 svg 图
            captchaPic: '',
            ruleForm: {
                //用户名，密码，输入的验证码
                username: '',
                password: '',
                captcha: '',
            },
            rules: {
                username: [
                    //使用的验证方法是 checkUsername
                    { validator: checkUsername, trigger: 'blur' }
                ],
                password: [
                    { validator: checkPassword, trigger: 'blur' }
                ],
                captcha: [
                    { validator: checkCaptcha, trigger: 'blur' }
                ],
            }
        };
    },
    methods: {
        //登录验证
        login(formName) {
            this.$refs[formName].validate((res) => {
                //如果校验通过
                if (res) {
                    //获取参数
                    let username = this.ruleForm.username.trim();
                    let password = this.ruleForm.password.trim();
                    //请求登录
                    this.$http.post('/users/backend/login', { username, password })
                        // 判断返回值
                        .then(({ data: { code } }) => {
                            if (code == 1) {
                                //跳转到主页
                                this.$router.push('/index');
                            } else {
                                //登录失败
                                alert('用户名或密码错误');
                            }
                        })
                } else {
                    //校验未通过
                    console.log('参数错误');
                    return false;
                }
            });
        },
        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
            //刷新重置验证码
            this.getCode();
        },
        //获取验证码
        getCode() {
            //向服务器请求验证码
            this.$http.get('/users/backend/code')
                .then(({ data: { code, data: { text, data } } }) => {
                    if (code != 1) return alert('获取验证码失败');
                    //验证码的答案
                    this.captchaAns = text;
                    //验证码的图
                    this.captchaPic = data;
                    console.log(text);
                });
        }
    },
    created() {
        //创建组件时直接获取一次验证码
        this.getCode();
    }
}
</script>
<style scoped>
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-image: url('../assets/img.jpg'); 
    background-size: cover;
    background-position: center;
}

.box {
    width: 450px;
    margin: 170px auto;
}

.btn {
    width: 46%;
}
</style>